<template>
<div class="main">
<div>{{all_myrest_ShareByProduct==null?'':''}}</div>
    <div class="item" v-for="item in itemList">
        <div class="partR">
            <div class="user">
                <div class="username">{{item.userName}}</div>
                <div class="udate">{{item.shareDate}}</div>
            </div>
            <div class="procnt">
                <div class="title">{{item.shareTitle}}</div>
                <div class="protit">{{item.productName}}</div>
                <div class="qihao">期号：<span class="qihaoval">{{item.productPeriod}}</span></div>
                <div class="cntxt">{{item.shareContent}}</div>
                <div class="pics">
                    <div class="picitem" v-for="pic_item in item.shareimageList" v-bind:style="'background: url(&quot;'+pic_item+'&quot;) center center / cover;'"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'

  export default {
      data(){
          return {
              itemList:[],
              mypayload:{
              },
              buypayload:{
              },

              QueryUserPayload:{
                  url:'baseapi',
                  actionName:"QueryUserInfo",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                }
              },
              WangQiShaiDanPayload:{
                  url:'duodata',
                  actionName:"ShareByProduct",
                  postData: {
                    productId:"",
                    //mobile:"18616717008",
                    //password:"112233",
                    //treeView:"true"
                  }
              },

          }
      },

      computed:{
          all_myrest_QueryUserInfo(){
              var dataval=this.$store.getters.all_restful_QueryUserInfo;
              if(dataval){
                  return dataval
              }else{
                  return null
              }
              //return dataval;
          },
          all_myrest_ShareByProduct(){
              var dataval=this.$store.getters.all_restful_ShareByProduct;
              if(dataval){
                this.itemList=dataval.body.sharelist;
                return dataval.body.sharelist
              }else{
                return null
              }
              //return dataval;
          },
          all_myrest(){
              return this.$store.getters.all_logindata
          },

      },
      created (){
         // this.cntReady();
        this.wangqi();
          //console.log('hahahahhahahahah'+this.cntReady())
      },

      methods:{
          doesh (){
            this.$store.commit('restful_api',this.QueryUserPayload)
          },
          GetQueryString:function(name){
              var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
              var r = document.URL.split("?")[1].match(reg);
              //alert("ddd:"+window.location.search)
              if(r!=null)return  unescape(r[2]); return null;
          },
          wangqi:function(){
              var pid=this.$route.params.pid;
              this.WangQiShaiDanPayload.postData.productId=pid;
              this.$store.commit('restful_api',this.WangQiShaiDanPayload)
          },
        /*  cntReady(){
              console.info(3434343);
              this.$store.commit('restful_api',this.mypayload);
           },
          ...mapActions([
              'increment',
              'decrement',
              'incrementIfOdd'
          ]),
        */
      },
      components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
    *{ margin:0; padding:0;}
    body,html,main{ width:100%; height:100%; font-size:12px;}
    div img{ width:100%;}

    .item{ padding:15px 15px 0 15px;}
    .partL{ width:56px;}
    .headpic{ width:55px; height:55px; border-radius:50px; overflow:hidden;}

    .partR{ padding:10px 0;}
    .user{ display:box; display:-webkit-box;}
    .username{ width:60%; color:#d01e41;}
    .udate{ -webkit-box-flex:1;box-flex:1; text-align:right; color:#878787; font-size: 12px;}
    .procnt{ background-color:#efefef; border-radius:4px; margin-top:6px; padding:10px 10px 0 10px; position:relative;}
    .title{ font-size:14px; color:#151515;}
    .protit{ color:#878787; font-size: 12px;}
    .qihao{ color:#878787; font-size: 12px;}
    .cntxt{ color:#535353; padding-top:5px; font-size: 12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
    .pics{ display:box; display:-webkit-box; padding:5px 0 10px 10px;}
    .picitem{ width:60px; height:60px; margin-right:10px;}
   /* .p1{ background:url(../images/shai/shaipic01.png) no-repeat; background-position:center; background-size:cover;}
    .p2{ background:url(../images/shai/shaipic02.png) no-repeat; background-position:center; background-size:cover;}
    .p3{ background:url(../images/shai/shaipic03.png) no-repeat; background-position:center; background-size:cover;}*/
    .sanjiao{ width:15px; height:15px; position:absolute; top:-1px; left:-11px;}
</style>
